<template>
  <div class="myCenter verify-container">
    <div class="verify-content">
      <div>
        <el-input v-model="account">
          <template slot="prepend">账号</template>
        </el-input>
      </div>
      <div>
        <el-input v-model="password" type="password">
          <template slot="prepend">密码</template>
        </el-input>
      </div>
      <div>
        <proButton :info="'提交'"
                   @click.native="login()"
                   @keyup.enter.native="enter"
                   :before="this.$constant.before_color_2"
                   :after="this.$constant.after_color_2">
        </proButton>
      </div>
    </div>
  </div>
</template>

<script>
const proButton = () => import( "../common/proButton.vue");

export default {
  components: {
    proButton
  },
  data() {
    return {
      redirect: this.$route.query.redirect,
      account: "",
      password: ""
    }
  },
  computed: {},
  created() {
    document.onkeyup = e => {
      if (e.keyCode === 13 && e.target.baseURI.match(/verify/)) {
        // 调用登录 验证方法
        this.login()
      }
    }
  },
  methods: {
    enter(){

    },
    login() {
      if (this.$common.isEmpty(this.account) || this.$common.isEmpty(this.password)) {
        this.$message({
          message: "请输入账号和密码！",
          type: "error"
        });
        return;
      }

      let user = {
        username: this.account.trim(),
        password: this.password.trim()
      };
      this.$createHttp.adminlogin(user).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "登录成功",
            type: 'success'
          })
          localStorage.setItem("adminToken", res.data);
          this.account = "";
          this.password = "";
          this.$router.push({path: "/"});
          this.getAdmin();
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      }).catch(error => {
        this.$message({
          message: error.message,
          type: 'error'
        })
      })
    },
    getAdmin(){
      this.$createHttp.userInfo(-200).then((res) => {
        if (res.code === 200){
          this.$store.commit("currentAdmin", res.data);
        }
      })
    },
  }
}
</script>

<style scoped>

.verify-container {
  height: 100vh;
  background: var(--verifyImage) center center / cover repeat;
}

.verify-content {
  background: var(--maxWhiteMask);
  padding: 30px 40px 5px;
  position: relative;
}

.verify-content > div:not(:first-child) {
  margin: 25px 0;
}

.verify-content > div:last-child > div {
  margin: 0 auto;
}

</style>
